<template>
  <ElFormItem
    :label="titleText(options, item)"
    :prop="[childIndex, 'value']"
    :rules="{
      required: item.isRequired === 'Y',
      message: '请选择',
      trigger: 'change',
    }"
    class="flex_column"
  >
    <p v-if="options.showDesc" class="desc f12 mb10">
      {{ options.description }}
    </p>
    <ElCascader
      v-model="item.value"
      :disabled="type === 'view'"
      :options="columns"
      :props="props"
      class="pc_w300"
      placeholder="请选择"
      @change="onChange"
    />
  </ElFormItem>
</template>

<script setup>
import { titleText } from "@/utils/common.js";
import { ElCascader, ElFormItem } from "element-plus";
import { } from "vue";

//defineOptions({ name: "PCCascader" });

const { item, type, index, childIndex } = defineProps([
  "item",
  "type",
  "index",
  "childIndex",
]);
const emits = defineEmits(["change"]);
const { options } = JSON.parse(item.vformJson);
const dropDownListOption = item.dropDownListOption
  ? JSON.parse(item.dropDownListOption).optionItems
  : [];
const columns = dropDownListOption;
const props = {
  CascaderProps: "hover",
  value: "label",
  label: "label",
  children: "children",
};
// 传递值改变后
const onChange = () => emits("change", item);
</script>
